<template>
  <div class="about">
    <h1>This is an about {{ pageName }} page</h1>
    <hr>
    <input v-model="inputData" type="text">
    <hr>
    <!-- 操作这个元素，然后通过Set Attri -->
    <!-- 一套独立的语法，获取元素的属性，然后来实现属性的绑定 -->
    <!-- person.name -> element Set attri: v-bind -->
    <!-- 为元素绑定动态属性 -->
    <!-- v-bind -> : -->
    <span name="静态变量" :id="person.name">{{ person.name }}, {{ person.age }}</span>
    <hr>
    <button v-if="true" @click="buttonClickHandler">确定</button>
    <hr>
    <ul>
      <li v-for="item in drinks" :key="item"> {{ item }}</li>
    </ul>
    <hr>
    <div>Picked: <span :style="{ color: picked }">{{ picked }}</span></div>
    <div>Picked: <span :class="[picked]">{{ picked }}</span></div>

    <input type="radio" id="red" value="red" v-model="picked" />
    <label for="red">Red</label>

    <input type="radio" id="blue" value="blue" v-model="picked" />
    <label for="blue">Blue</label>
    <hr>
    {{ app.role }}
  </div>
</template>

<script setup>

import { nextTick, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue';
import {app} from '@/stores/counter'

// wrap 'test' --> {value: 'test'}
// model ---> view
const pageName = ref('test2')
console.log(pageName.value)



// view ---> model
// form 表单
// data ---> api
const inputData = ref('test input')
console.log(inputData)

//
watch(inputData, (v, ov) => {
  console.log(v, ov)
})

onBeforeMount(() => {
  console.log("onBeforeMount")
})
onMounted(() => {
  console.log("onMounted")
  console.log(person.name, person.age)

  // 立即修改变量的值
  person.age = 28
  // 这个效果，不会立即更新到 UI上面
  // 立即从界面上获取 这个元素
  // 当前获取的元素的值是多少？
  // 18 ? 28
  // 等这个 这次更新 同步到界面上后，在访问UI获取
  // nextTick 等下 更新对联 执行后，才执行你的函数
  nextTick(() => {
    console.log(document.getElementById("张三").innerText)
  })


  // console.log(getCurrentInstance())
})

onBeforeUpdate(() => {
  console.log("onBeforeUpdate")
})
onUpdated(() => {
  console.log("onUpdated")
})

onBeforeUnmount(() => {
  console.log("onBeforeUnmount")
})
onUnmounted(() => {
  console.log("onUnmounted")
})

// ....
const person = reactive({
  name: "张三",
  age: 18
})

const buttonClickHandler = (v) => {
  console.log(v)
}

const drinks = reactive(['Tea', "Coffee", "Milk"])

//
const picked = ref('red')

</script>

<style>
/* @media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
} */

.red {
  color: red;
}

.blue {
  color: blue;
}
</style>
